<template>
   <div class="rongqi">
        <header class="head">
            <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
            <p>订单</p>
        </header>
        <section class="hezi">
            <figure>
                <img src="//fuss10.elemecdn.com/f/18/9fb04779371b5b162b41032baf5f3gif.gif" alt="">
            </figure>
        </section>
        <scetion class="biaoti">
            <h3>登录后查看外卖订单</h3>
            <button class="btn">登录</button>
        </scetion>

   </div>
</template>
<script>
    
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}

  .rongqi{
        background: #f5f5f5;
        width: 100%;
        height: 100vh;
       .head{
           width: 100%;
          .px2rem(height,100);
          background: #0033FF;
          display: flex;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 100;
          span{
              width: 13%;
              .px2rem(height,100);
              display: flex;
              justify-content: center;
              align-items: center;
              .px2rem(font-size,42);
               color: #fff;
               position: absolute;
               top: 0;
               left: 0;
          }
          p{
            width: 100%;
             .px2rem(height,100);
             .px2rem(font-size,36);
             color: #fff;
             font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
          }
       }
    .hezi{
        width: 100%;
        .px2rem(height,600);
        display: flex;
        justify-content: center;
       .px2rem(padding-top,300);
        figure{
            width: 82%;
           .px2rem(height,600);
            padding: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .biaoti{
         width: 100%;
        .px2rem(height,270);
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         h3{
            .px2rem(font-size,44);
            font-weight: bold;
            color: #333333;
        }
           .btn{
           width: 52%;
           .px2rem(height,100);
           background: #339900;
           .px2rem(font-size,40);
           font-weight: bold;
           color: #fff;
           text-align: center;
           line-height: 2; 
           .px2rem(margin-top,-80);
           border-radius: 8px;
       }
    }
  }


</style>
